<template>
  <div id="app">
    <v-header :seller="seller"></v-header>
    <div class="tab-wrapper">
      <tab :tabs="tabs"></tab>
    </div>
  </div>
</template>

<script>
import { getSeller } from './api/index'
import header from './components/header/header.vue'
import Tab from './components/tab/tab.vue'
import Goods from './components/goods/goods.vue'
import Ratings from './components/ratings/ratings.vue'
import Seller from './components/seller/seller.vue'
import qs from 'query-string'

export default {
  name: 'app',
  data() {
    return {
      seller: {
        id: qs.parse(location.search).id
      }
    }
  },
  computed: {
    tabs() {
      return [{
        label: '商品',
        comps: Goods,
        data: {
          seller: this.seller
        }
      }, {
        label: '评价',
        comps: Ratings,
        data: {
          seller: this.seller
        }
      }, {
        label: '商家',
        comps: Seller,
        data: {
          seller: this.seller
        }
      }]
    }
  },
  created() {
    this._getSeller()
  },
  methods: {
    _getSeller() {
      getSeller({
        id: this.seller.id
      }).then((seller) => {
        this.seller = seller
      })
    }
  },
  components: {
    'v-header': header,
    Tab
  }
}
</script>
<style lang="stylus" scoped>
  #app
    .tab-wrapper
      position fixed
      top 134px
      right 0
      bottom 0
      left 0
</style>
